<!--
 * @Author: Wangtao
 * @Date: 2020-10-16 15:00:42
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-01-27 13:57:57
-->
<!--titleArr: ['aaa', 'bbb', 'ccc']-->
<!--例子：<breadCrumb :titleArr="titleArr" @back="back"></breadCrumb>-->
<template>
  <div class="breadCrumb" :style="{
    fontSize:fontSize + 'px',
    boxShadow: isShowShadow ?
    '0px 1px 4px 0px #E0E6F0': '0px',
    padding: isShowShadow ? '21px 24px' : '21px 0px'
    }">
    <span v-for="(item, index) in titleData" :key="index">
      <span class="marginr other back" :class="titleData.length === 1 ?'onlyOne':''" v-if="index === 0 && isClickTitleBack" @click="back">
        <span class="V7_iconfont V7_iconV7tubiao_mianfanhui"></span>
        {{item}}
      </span>
      <span v-if="index === 0 && !isClickTitleBack">
        <span class="V7_iconfont V7_iconV7tubiao_mianfanhui back" @click="back"></span>
        <span class="marginr other" v-if="index === 0 && !isClickTitleBack">
          {{item}}
        </span>
      </span>
      <span class="marginr other" v-if="index !== (titleData.length - 1) && index !== 0">{{item}}</span>
      <span class="marginr last" v-if="index === (titleData.length - 1) && index !== 0">{{item}}</span>
      <span class="marginr" v-show="index !== (titleData.length - 1)">/</span>
    </span>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
  name: 'breadCrumb'
})
export default class BreadCrumb extends Vue {
  @Prop({ default: 14 }) private fontSize!: number
  @Prop({ default: true }) private isShowShadow!: boolean
  @Prop({ default: true }) private isClickTitleBack!: boolean // 是否支持点击title返回
  @Prop() private titleArr: any
  private back () {
    this.$emit('back')
  }

  private get titleData () {
    return this.titleArr
  }
}
</script>
<style lang="stylus" scoped>
  .breadCrumb
    display inline-block
    font-size 14px
    line-height 14px
    font-weight bold
    // padding 21px 24px
    width 100%
    height 56px
    background #FFFFFF
    // box-shadow 0px 1px 4px 0px #E0E6F0
    border-radius 10px 10px 0px 0px
    .icon
      color $c-main
      display inline-block
      width 18px
      height 18px
      line-height 18px
      border 1px solid $c-main
      border-radius 50%
      text-align center
    .el-icon-arrow-left
      font-size 12px
      margin-right 10px
    .marginr
      color #767E91
      margin-right 7px
    .last,.onlyOne
      font-weight bold
    .other
      color $fc-gray2
    .back
      color #767E91
      cursor pointer
      .V7_iconfont
        color #B3B9C7
        margin-right 8px
        font-size 14px
    .back:hover
      color $c-main
    .onlyOne
      color $cf-gray
    .last
      color #303753
    .V7_iconV7tubiao_mianfanhui
      font-size 14px
</style>
